<template>
  <ul class="radio-tab">
    <li
      v-for="tabItem in tabList"
      :key="tabItem.name"
      :class="['radio-tab-nav', tab === tabItem.name ? 'radio-tab-nav_active' : '']"
      @click="handleUpdateValue(tabItem.name)"
    >
      <span>{{ tabItem.label }}</span>
    </li>
  </ul>
</template>

<script setup lang="ts">
import type { ITabItem } from './type';

interface Props {
  tab: string;
  tabList: ITabItem[];
}

const props = defineProps<Props>();
const emits = defineEmits(['change']);

function handleUpdateValue(name: string) {
  const data = props.tabList.find((v) => v.name === name);
  emits('change', name, data);
}

defineOptions({ name: 'ComRadioTabA' });
</script>

<style scoped lang="scss">
.radio-tab {
  @apply w-full flex h-[37px] cursor-pointer;
  font-family: Alibaba PuHuiTi;
}

.radio-tab-nav {
  @apply h-[37px] px-[20px] text-center leading-[32px];
  background: url('./assets/bg.png') no-repeat center;
  background-size: 100% 100%;

  &.radio-tab-nav_active {
    background: url('./assets/bg-active.png') no-repeat center;
    background-size: 100% 100%;
  }
}
</style>
